<template>
	<view class="container">
		<userInfo></userInfo>
		<view class="title">家庭经济状况登记表</view>
		<view class="bigTitle">家庭财产情况</view>
		
		<view class="lineOptionsBox2 lineOptionsBox3">
			<view class="lineOptionsTitle lineOptionsTitle1">房产</view>
			<view class="optionsBox">
				<view class="optionsTitle">
					<view class="zhongdian">*</view>
					<view class="optionsTitleIn">自有住房</view>
				</view>
				<view class="optionsBoxRight1">
					<view class="optionsBoxRight">
						<picker class="picker" :value="obj.housingValue" mode="selector" range-key="dictLabel" :range="zhufangfenlei" @change="zhufangfenleiChange">
							<view class="optionsBoxRightIn optionsBoxRightIn1">
								<view class="">
									{{zhufangfenleiObj[obj.housingValue]}}
								</view>
								<image class="sanjiao" src="/static/kancha/sanjiao.png"></image>
							</view>
						</picker>
						<view class="optionsBoxRightIn">
							<view class="taoshuBox" @click="chooseNum(1)">
								<image class="chooseIcon" v-if="obj.housingNum == 1" src="/static/kancha/choose.png"></image>
								<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
								<view class="bottomOptionsTitle">1套</view>
							</view>
							<view class="taoshuBox" @click="chooseNum(2)">
								<image class="chooseIcon chooseIcon1" v-if="obj.housingNum == 2" src="/static/kancha/choose.png"></image>
								<image class="chooseIcon chooseIcon1" v-else src="/static/kancha/nochoose.png"></image>
								
								<view class="bottomOptionsTitle">2套</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="optionsBox">
				<view class="optionsTitle">
					<view class="zhongdian"></view>
					<view class="optionsTitleIn">房产</view>
				</view>
				<view class="optionsBoxRight1">
					<view class="optionsBoxRight">
						<picker class="picker" :value="obj.housingProperty" mode="selector" :range="chanquan" @change="chanquanChange">
							<view class="optionsBoxRightIn optionsBoxRightIn1">
								<view class="">
									{{chanquan[obj.housingProperty]}}
								</view>
								<image class="sanjiao" src="/static/kancha/sanjiao.png"></image>
							</view>
						</picker>
						<picker class="picker" mode="selector" range-key="dictLabel" :range="yongtu" @change="yongtuChange">
							<view class="optionsBoxRightIn">
								<view class="">
									{{yongtuObj[obj.housingUse]}}
								</view>
								<image class="sanjiao" src="/static/kancha/sanjiao.png"></image>
							</view>
						</picker>
					</view>
					<view class="lineOptionsRightIn lineOptionsRightIn3">
						<view class="bottomOptionsTitle bottomOptionsTitle1">房产证编号</view>
						<view class="lineOptionsInputBox lineOptionsInputBox2">
							<input type="text" v-if="!isOpen" v-model="obj.housingNo" class="lineOptionsInput">
							<view v-else class="lineOptionsInput">
								{{obj.housingNo}}
							</view>
						</view>
					</view>
					<view class="lineOptionsRightIn lineOptionsRightIn3">
						<view class="bottomOptionsTitle bottomOptionsTitle1">建筑面积</view>
						<view class="lineOptionsInputBox lineOptionsInputBox2">
							<input type="digit"  @input="checkInput($event,'housingArea')" v-if="!isOpen" class="lineOptionsInput" v-model="obj.housingArea">
							<view v-else class="lineOptionsInput">
								{{obj.housingArea}}
							</view>
							<view class="pingfangmi">m<text>2</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="optionsBox optionsBox1">
				<view class="optionsTitle">
					<view class="zhongdian">*</view>
					<view class="optionsTitleIn">租赁</view>
				</view>
			</view>
			<view class="optionsBox">
				<view class="optionsTitle">
					<view class="zhongdian"></view>
					<view class="optionsTitleIn">房产</view>
				</view>
				<view class="optionsBoxRight1">
					
					<view class="optionsBoxRight">
						<picker class="picker" range-key="dictLabel" :value="obj.housingSource" mode="selector" :range="zulin" @change="zulinChange">
							<view class="optionsBoxRightIn optionsBoxRightIn2">
								<view class="">
									{{zulinObj[obj.housingSource]}}
								</view>
								<image class="sanjiao" src="/static/kancha/sanjiao.png"></image>
							</view>
						</picker>
						<picker class="picker" :value="obj.housingStructure" range-key="dictLabel" mode="selector" :range="jiegou" @change="jiegouChange">
							<view class="optionsBoxRightIn optionsBoxRightIn2">
								<view class="">
									{{jiegouObj[obj.housingStructure]}}
								</view>
								<image class="sanjiao" src="/static/kancha/sanjiao.png"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- <view class="optionsBox">
				<view class="optionsTitle">
					<view class="zhongdian"></view>
					<view class="optionsTitleIn">房产2</view>
				</view>
				<view class="optionsBoxRight1">
					<view class="optionsBoxRight">
						<view class="optionsBoxRightIn optionsBoxRightIn2">
							<view class="">
								租赁私有
							</view>
							<image class="sanjiao" src="/static/kancha/sanjiao.png"></image>
						</view>
						<view class="optionsBoxRightIn optionsBoxRightIn2">
							<view class="">
								土木
							</view>
							<image class="sanjiao" src="/static/kancha/sanjiao.png"></image>
						</view>
					</view>
				</view>
			</view> -->
			<view class="optionsBox optionsBox1 optionsBox2">
				<view class="optionsTitle">
					<view class="zhongdian">*</view>
					<view class="optionsTitleIn">债权情况</view>
				</view>
				<view class="lineOptionsRight lineOptionsRight1">
					<view class="lineOptionsRightIn" @click="changeZhaiquan(0)">
						<image class="chooseIcon" v-if="zhaiquan != 1" src="/static/kancha/choose.png"></image>
						<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
						<view class="bottomOptionsTitle">没有</view>
					</view>
					<view class="lineOptionsRightIn lineOptionsRightIn2" @click="changeZhaiquan(1)">
						<image class="chooseIcon" v-if="zhaiquan == 1" src="/static/kancha/choose.png"></image>
						<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
						<view class="bottomOptionsTitle">有</view>
						<view class="lineOptionsInputBox">
							<input v-if="!isOpen&&zhaiquan == 1"  @input="checkInput($event,'debt')" type="digit" v-model="obj.debt" class="lineOptionsInput">
							<view v-else class="lineOptionsInput">
								{{zhaiquan == 1?obj.debt:''}}
							</view>
							<view class="inputIcon">元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="optionsBox">
				<view class="optionsTitle">
					<view class="zhongdian">*</view>
					<view class="optionsTitleIn">其他财产</view>
				</view>
				<view class="lineOptionsRight lineOptionsRight1">
						<view class="lineOptionsInputBox lineOptionsInputBox1">
							<input v-if="!isOpen" type="digit" v-model="obj.otherProperty" @input="checkInput($event,'otherProperty')" class="lineOptionsInput">
							<view v-else class="lineOptionsInput">
								{{obj.otherProperty}}
							</view>
							<view class="inputIcon">元</view>
						</view>
				</view>
			</view>
		</view>
		<!-- <view class="button1" @click="save">
			提交
		</view> -->
		<view class="button"  v-if="isSave == '0'" @click="link(true)">
			下一步
		</view>
		<view class="zhenchayuan">侦查员——{{user.nickName?user.nickName:user.userName}}</view>
		<view class="bottom"></view>
		<otherList @openChange="isOpenChange"/>
	</view>
</template>

<script>
	import otherList from '@/pages/components/otherInfoList.vue'
	import userInfo from '@/pages/components/userInfo.vue'
	export default {
		components:{
			otherList,userInfo
		},
		data(){
			return {
				isOpen:false,
				user:{},
				isSave:'1',
				obj:{
					guaranteeNumber:uni.getStorageSync('guaranteeNumber'),
					"residenceAddressCounty": "220102",
					"residenceAddressStreet": "22010201",
					"residenceAddressCommunity": "2201020101",
					"residentialAddressCounty": "220102",
					"residentialAddressStreet": "22010201",
					"residentialAddressCommunity": "2201020101",
					"applicantName": "张三",
					"contactNumber": "18504444503",
					"crUser": "admin",
					"urbanPopulation": 200000,
					"ruralPopulation": 100000,
					"housingValue": 1,
					"housingArea": "1000",
					"housingSource": 1,
					"housingNum": 2,
					"householdIncome": "1000000",
					"familyMembersLtati": "200000",
					"dependency": "121211a",
					"renovationCondition": "豪华",
					"householdAppliances": "aaaaaadd",
					"waterExpenditure": "10000",
					"communicationFee": "1000",
					"nonNecessities": "100",
					"childrenChooseSchool": "200",
					"valuables": "3000",
					"otherSituationsTces": "100",
					"comprehensiveSofd": "困难",
					"investigator": "admin",
					"whetherTheSracwtam": 1,
					"housingNo": "no0001",
					"houseCategory": 1,
					houseUsing:1,
					otherProperty:"",
					housingStructure:1,
					"bondSituation": 1,
					"bondMoney": "100000"
				},
				zhufangfenlei:['商品房','经济适用房','福利房','拆迁安置','自建住房','其他'],
				zhufangfenleiObj:{},
				chanquan:['产权','无产权'],
				chanquanObj:{},
				yongtu:['自用','商住','出租'],
				yongtuObj:{},
				zulin:['租赁私有','租赁公有','廉租房','其他'],
				zulinObj:{},
				jiegou:['土木','砖木','砖混','框架','其他'],
				jiegouObj:{},
				zhaiquan:0,
				pageInfo:{
					pageName:'家庭财产情况2',
					pagePath:'/pages/kancha/familyMoneyInfoTwo',
					pageIndex:9
				}
			}
		},
		onLoad() {
			this.isSave = uni.getStorageSync('isSave')
			this.user = uni.getStorageSync('user')
			this.getDetail()
		},
		methods:{
			checkInput(e,value) {
				setTimeout(()=>{
					this.obj[value] = this.$verifyMoney(e.detail.value);
					this.obj = JSON.parse(JSON.stringify(this.obj))
				},0)
			},
			// 表单验证
			verifyData(){
				let obj = this.obj
				// 验证车辆
				if(obj.housingNum == 1){
					if(this.$verifyEmpty(obj.houseNo)){
						return {
							title:'房产证编号不能为空',
							status:false
						}
					}
					
					if(this.$verifyEmpty(obj.housingArea)){
						return {
							title:'建筑面积不能为空',
							status:false
						}
					}
				}
				// 验证农机
				if(this.zhaiquan == '1'){
					if(this.$verifyEmpty(obj.debt)){
						return {
							title:'债券金额不能为空',
							status:false
						}
					}
				}
				if(this.$verifyEmpty(obj.otherProperty)){
					return {
						title:'其他财产不能为空',
						status:false
					}
				}
				return {
					title:'验证通过',
					status:true
				}
			},
			changeZhaiquan(index){
				this.zhaiquan = index
			},
			zhufangfenleiChange(e){
				this.obj.housingValue = this.zhufangfenlei[e.detail.value].dictValue
			},
			chanquanChange(e){
				this.obj.housingProperty = e.detail.value
			},
			yongtuChange(e){
				this.obj.housingUse = this.yongtu[e.detail.value].dictValue
			},
			zulinChange(e){
				this.obj.housingSource = this.zulin[e.detail.value].dictValue
			},
			jiegouChange(e){
				this.obj.housingStructure = this.jiegou[e.detail.value].dictValue
			},
			async getDetail(){
				uni.showLoading({
					title:'请稍等...'
				})
				let res = await this.$get('/app/bus/indexRealEstateSituation?guaranteeNumber='+uni.getStorageSync('guaranteeNumber'),{})
				if(res.code == 200){
					let obj =res.data[0]
					Object.keys(obj).forEach(key=>{
						if(obj[key] === null){
							obj[key] = ""
						}
					})
					obj.otherProperty =obj.otherProperty||0// 其他财产
					obj.debt =obj.debt||0// 债券情况
					this.zhaiquan = obj.debt&&1
					obj.housingArea = obj.housingArea||0 // 建筑面积
					obj.housingNum = obj.housingNum||0 // 房屋数量
					obj.housingProperty = obj.housingProperty||0 // 产权
					obj.housingValue = obj.housingValue||0 // 性质
					obj.housingUse = obj.housingUse||1 // 使用
					obj.housingSource = obj.housingSource||0 // 来源
					obj.housingStructure = obj.housingStructure||0 // 结构
					this.obj = obj
				}
				// 获取住房类型
				let zhufangfenleiArr = await this.$get('/app/bus/dictType?dictType=own_housing_types',{})
				if(zhufangfenleiArr.code == 200){
					this.zhufangfenlei = zhufangfenleiArr.data
					this.zhufangfenlei.forEach(item=>{
						this.zhufangfenleiObj[item.dictValue]=item.dictLabel
					})
				}
				
				// 获取租赁
				let zulinArr = await this.$get('/app/bus/dictType?dictType=housing_lease_type',{})
				if(zulinArr.code == 200){
					this.zulin = zulinArr.data
					this.zulin.forEach(item=>{
						this.zulinObj[item.dictValue]=item.dictLabel
					})
				}
				// 获取结构
				let jiegouArr = await this.$get('/app/bus/dictType?dictType=housing_structure',{})
				if(jiegouArr.code == 200){
					this.jiegou = jiegouArr.data
					this.jiegou.forEach(item=>{
						this.jiegouObj[item.dictValue]=item.dictLabel
					})
				}
				// 获取房屋用途
				let yongtuArr = await this.$get('/app/bus/dictType?dictType=house_use',{})
				if(yongtuArr.code == 200){
					this.yongtu = yongtuArr.data
					this.yongtu.forEach(item=>{
						this.yongtuObj[item.dictValue]=item.dictLabel
					})
				}
				uni.hideLoading()
			},
			chooseNum(number){
				if(number == this.obj.housingNum){
					this.obj.housingNum = 0
				} else {
					
				this.obj.housingNum = number
				}
			},
			// 基本信息开关
			isOpenChange(e){
				this.isOpen = e
				if(e){
					this.link(false)
				}
			},
			async link(isLink){
				
				let result = this.verifyData()
				console.log(result)
				if(isLink){
					if(!result.status){
						uni.showModal({
							content: result.title,
							showCancel: false,
							confirmText: '确定'
						});
						return
					}
				}
				this.obj.guaranteeNumber = uni.getStorageSync('guaranteeNumber')
				let data = JSON.parse(JSON.stringify(this.obj))
				let res = await this.$post('/app/bus/updateRealEstateSituation',data,false)
				if(res.code == 200){
					let pageStatus = uni.getStorageSync('pageStatus')
					if(result.status){
						pageStatus.familyMoneyInfoTwo = {
							...this.pageInfo,
							status:true
						}
					} else {
						pageStatus.familyMoneyInfoTwo = {
							...this.pageInfo,
							status:false
						}
					}
					uni.setStorageSync('pageStatus',pageStatus)
					if(isLink){
						uni.redirectTo({
							url:'/pages/kancha/familyPay'
						})
					} else {
						
					}
				}
				
			}
		}
	}
</script>

<style scoped>
	.title{
		font-size:36rpx;
		font-weight: 700;
		color:#fa5245;
		line-height:1;
		text-align:center;
		padding-bottom:20rpx;
		padding-top:50rpx;
	}
	.bigTitle{
		font-size:34rpx;
		text-align:center;
		margin-top:30rpx;
	}
	.lineOptionsBox{
		width:670rpx;
		border-radius:6rpx;
		border:1rpx solid #ccc;
		display:flex;
		align-items:center;
		height:86rpx;
		padding:0 40rpx;
		margin:0 auto;
		margin-top:30rpx;
		justify-content:space-between;
	}
	.lineOptionsBox2{
		width:670rpx;
		border-radius:6rpx;
		border:1rpx solid #ccc;
		padding:20rpx 40rpx;
		margin:0 auto;
		margin-top:30rpx;
	}
	.lineOptionsBox3{
		padding-left: 0;
	}
	.lineOptionsTitle,.inputIcon{
		color: #ccc;
	}
	.lineOptionsTitle1{
		padding-left: 40rpx;
	}
	.lineOptionsBox view,.lineOptionsBox input ,.lineOptionsBox2 input{
		font-size:26rpx;
	}
	.lineOptionsRight{
		display: flex;
		align-items:center;
	}
	.lineOptionsBox2 .lineOptionsRight{
		justify-content: space-between;
	}
	.lineOptionsRight1{
		flex: 1;
	}
	.lineOptionsRightIn{
		display: flex;
		align-items:center;
	}
	.lineOptionsRightIn2{
		margin-left: 50rpx;
	}
	.lineOptionsRightIn3{
		flex:1;
		margin-top: 20rpx;
	}
	.lineOptionsRightIn3 input{
		flex: 1;
	}
	.chooseIcon{
		width:28rpx;
		height:27rpx;
		margin-right: 20rpx;
	}
	.lineOptionsInputBox2{
		flex: 1;
	}
	.lineOptionsInputBox{
		width: 144rpx;
		display: flex;
		align-items:center;
		border-bottom:1rpx solid #333;
		margin-left:10rpx;
	}
	.lineOptionsInput{
		width: 100rpx;
		text-align: center;
	}
	.lineOptionsRight2{
		margin-top:20rpx;
	}
	.timeIcon{
		width:26rpx;
		height:25rpx;
		margin:0 10rpx;
	}
	.time{
		width: 100rpx;
		text-align: center;
	}
	.timeDes{
		color:#ccc
	}
	.sanjiao {
		width: 23rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}
	.button {
		width: 570rpx;
		line-height: 84rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 60rpx;
		border-radius: 6rpx;
		background: linear-gradient(90deg, #fa5444, #ff988f);
		font-size: 28rpx;
		color: white;
	
	}
	
	.bottom {
		height: 160rpx;
	}
	.zhongdian{
		color: red;
		width: 40rpx;
		text-align: center;
	}
	.optionsBoxRight{
		display: flex;
		align-items: center;
	}
	.optionsBoxRight1{
		flex:1;		
	}
	.optionsBoxRightIn{
		display: flex;
		align-items: center;
		flex:1;
	}
	.optionsBoxRightIn1{
		/* margin-right: 50rpx; */
	}
	.optionsTitle{
		display: flex;
		align-items: center;
	}
	.optionsTitleIn{
		color:#ccc;
		width: 180rpx;
	}
	.optionsBox{
		display: flex;
		margin-top: 20rpx;
		align-items: flex-start;
	}
	.optionsBox1{
		margin-top: 40rpx;
	}
	.chooseIconFrist{
		margin-left: 50rpx;
	}
	.chooseIcon1{
		margin-left: 20rpx;
	}
	.pingfangmi{
		color: #ccc;
	}
	.pingfangmi text{
		display: inline-block;
		font-size: 18rpx;
		color:#ccc;
		position: relative;
		transform: translateY(-10rpx);
	}
	.bottomOptionsTitle1{
		width: 144rpx;
	}
	.lineOptionsInputBox1{
		flex:1;
	}
	.lineOptionsInputBox1 input{
		flex:1;
	}
	.button1{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:#656668;
		font-size:28rpx;
		color:white;
	}
	.button{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:linear-gradient(90deg,#fa5444,#ff988f);
		font-size:28rpx;
		color:white;
		
	}
	.zhenchayuan{
		font-size: 24rpx;
		color:#ccc;
		margin-top: 20rpx;
		text-align: center;
	}
	.bottom{
		height:160rpx;
	}
	.topTitleBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 90rpx;
	}
	.listTiteBox {
		position: relative;
	}
	
	.listTitleBackground {
		height: 16rpx;
		width: 120rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background: linear-gradient(-90deg, #ffd356, #ffffff)
	}
	.listTitle{
		font-size:38rpx;
		position: relative;
	}
	.right {
		width: 34rpx;
		height: 34rpx;
		position: relative;
		transition: all 0.3s;
	}
	.childrenBox{
		width: 600rpx;
		margin: 0 auto;
		height: 0;
		position: relative;
		transition: all 0.3s;
		overflow: hidden;
	}
	.childrenOptionsBox{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.childrenOptionsTitle{
		font-size: 26rpx;
		line-height: 30rpx;
		color: #ccc;
	}
	.childrenOptionsDes{
		font-size: 26rpx;
		line-height: 30rpx;
		width: 450rpx;
		text-align: right;
	}
	.rightOpen{
		transform: rotate(90deg);
	}
	.line1{
		height: 20rpx;
		background-color: #efefef;
	}
	.otherInfo{
		width: 200rpx;
		line-height:70rpx;
		text-align: center;
		font-size: 24rpx;
		color:white;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #3b3b3b;
		position: fixed;
		right: 0;
		top:460rpx;
		font-family: '黑体';
	}
	.taoshuBox{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
	}
	.taoshuBox view{
		white-space: nowrap;
	}
	.picker{
		flex: 1;
	}
</style>
